<template>
  <div>
    <div style="border-bottom: 1px black soild">
      <div style="float: left; margin-left: 200px">
        工作区：<el-input
          v-model="input"
          placeholder="请输入内容"
          style="width: 40%"
        ></el-input>
      </div>
      <div style="float: left; margin-left: 200px">
        <div class="block" style="float: left">
          开始周：
          <el-date-picker
            v-model="value"
            type="week"
            format="yyyy 第 WW 周"
            placeholder="选择周"
            :picker-options="{
              disabledDate: time => {
                  let end = new Date(JSON.parse(JSON.stringify(this.queryData.endDate)))
                  return time > end ||
                  time < new Date(end.setDate((end.getDate()-11*7)));
            },
            firstDayOfWeek: 1}">
          </el-date-picker>
          结束周：
          <el-date-picker
            v-model="value"
            type="week"
            format="yyyy 第 WW 周"
            placeholder="选择周"
            :picker-options="{
                disabledDate: time => {
                    let start = new Date(JSON.parse(JSON.stringify(this.queryData.startDate)))
                    return time < start ||
                    time > new Date(start.setDate((start.getDate()+11*7)));
                },
                firstDayOfWeek: 1
            }">
          </el-date-picker>
        </div>
      </div>
      <div style="float: left; margin-left: 200px">
        <el-row>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button type="primary" @click="resetQuery">重置</el-button>
        </el-row>
      </div>
    </div>
    <hr />
    <div>
      <Week
        mixtureId="mixtureId"
        :MixtureData="MixtureData"
        :xAxisData="xAxisData"
        :text="value"
      />
      <div class="list">
        <week-table :data="tableData"></week-table>
      </div>
    </div>
  </div>
</template>
<script>
import Week from "../../components/week.vue";
import WeekTable from "../../components/energy/weekTable.vue";
import { listWeek } from "@/api/system/energy";
export default{
  components: { Week, WeekTable },
   data() {
    return {
      xAxisData: [],
      input: "",
      value: "",
      queryParams: {
        startWeek: "2021-03-24",
        endWeek: "2021-05-26",
        areaId: "2e6c8e19512d422f961d4ecd783c39f5",
      },

       tableData: [], // 表格数据
      MixtureData: {
        grid: {
          right: "20%",
        },
        legend: {
          data: [
            "总能耗成本(元)",
            "单车能耗成本(元/台)",
            "预计产量",
            "实际产量",
          ],
        },
        series: [
          {
            name: "总能耗成本(元)",
            type: "bar",
            data: [],
            barWidth: "50%",
          },
          {
            name: "单车能耗成本(元/台)",
            type: "bar",
            data: [],
            barWidth: "50%",
          },
          {
            name: "预计产量",
            type: "line",
            yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
            data: [],
            symbolSize: 10,
          },
          {
            name: "实际产量",
            type: "line",
            yAxisIndex: 1,
            data: [],
            symbolSize: 10,
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
    methods: {
        getList() {
      listWeek(this.queryParams).then((response) => {
        this.tableData = response;
        console.log(this.tableData);
        if (response.lenght != 0) {
          response.forEach((item, key) => {
            this.tableData[key].completion = item.completion;
            this.xAxisData.push(item.date);
            this.MixtureData.series[0].data.push(item.totalEnergy);
            this.MixtureData.series[1].data.push(item.avgEnergy);
            this.MixtureData.series[2].data.push(item.forecast);
            this.MixtureData.series[3].data.push(item.actual);
          });
        }
      });
    },

      pickerOptions(){
          console.log(ddfff);
      },
         /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
}
</script>

<style>
</style>